import { createFileRoute } from '@tanstack/react-router'
import { motion } from 'framer-motion'
import section2Image from '@/assets/images/value-module/section2-image.webp'
import titleIcon from '@/assets/images/value-module/title-icon.svg'

export const Route = createFileRoute('/_no-auth/value-module/')({
  component: ValueModule,
})

function ValueModule() {
  const section2List = [
    {
      topTitle: 'Scientific and technological',
      title: '科创成果、价值转化',
      message1:
        '新佰时生物技术，敬畏生命健康的本质和意义！以“脑电生物技术、医学细胞生物学、人工智能、脑机接口、数字疗法”等科创成果的价值转化，打造数字量化健康管理系统，标准化专业。',
      message2:
        '服务运营：健康监测、服务跟进、专业指导: 自愈力管理、平衡调节。',
    },
    {
      topTitle: 'Digital Quantification Project',
      title: '数字量化、项目运营',
      message1: '融合科创与实践应用的知识产权型技术项目价值。',
      message2:
        '包括有：1、BCI技术应用转化的脑电生物技术检测系统；2、Al数字化技术赋能制作的学习内驱力家校俱乐部以系列化的家长科普课程与沙龙互动；3、数字量化标准运营的健康管理训练中心(示范基地)用于项目连锁运营及创业创新平台搭建。',
    },
    {
      topTitle: 'Team & Continuous Progress',
      title: '团队效应、持续递进',
      message1:
        '人才培养与团队高效运作是事业发展的根基，持续递进式的人才培养与高效运营团队打造，持续培养以健康事业为职业发展合作伙伴为高效团队成员，赋能助力提升：职业进修、实习实操、事业发展等实效持续递进的模式。',
      message2: '',
    },
  ]
  return (
    <div className={'layout_top bg-main min-h-screen overflow-hidden'}>
      {/*  section1 */}
      <motion.div
        initial={{ opacity: 0 }}
        whileInView={{ opacity: 1 }}
        transition={{ duration: 1 }}
        className={
          "layout relative bg-[url('@/assets/images/value-module/section1-bg.webp')]" +
          ' 3xl:pt-[13.3rem] bg-cover bg-no-repeat pt-[5.1875rem] pb-0 lg:bg-cover lg:pt-[15rem]' +
          " lg:bg-[url('@/assets/images/value-module/section1-bg-pc.webp')]"
        }
      >
        <h1 className={'text-primary layout-h1 leading-line-1 font-bold'}>
          新佰时·价值
        </h1>
        <div
          className={
            'bg-primary 3xl:text-[4.25rem] leading-line-2 3xl:px-[4.6rem] relative z-10 mt-2 inline-block' +
            ' font-extralight lg:px-[3.7rem]' +
            ' lg:text-4xl' +
            ' px-[2.5rem]' +
            ' text-xl' +
            ' text-white'
          }
        >
          <span className={'3xl:text-7xl font-bold lg:text-4xl'}>NBT-</span>
          Value
        </div>
        {/*line*/}
        <ul
          className={
            '3xl:space-y-20 absolute right-0 -bottom-1 flex w-full flex-col items-end space-y-8 lg:-bottom-4' +
            ' lg:space-y-16'
          }
        >
          <li
            className={
              'bg-primary h-[0.0625rem] w-1/6 lg:h-[0.125rem] lg:w-2/5'
            }
          ></li>
          <li
            className={
              'bg-primary h-[0.0625rem] w-2/6 lg:h-[0.125rem] lg:w-[55%]'
            }
          ></li>
          <li
            className={
              'bg-primary h-[0.0625rem] w-4/6 lg:h-[0.125rem] lg:w-4/5'
            }
          ></li>
          <li
            className={'bg-primary layout-left right-0 h-[0.125rem] lg:h-3'}
          ></li>
        </ul>
      </motion.div>
      {/*  section2 */}
      <div
        className={
          'layout pt-16 pb-20 lg:flex lg:flex-row-reverse lg:items-center lg:justify-between'
        }
      >
        <motion.img
          initial={{ opacity: 0, x: 80 }}
          whileInView={{ opacity: 1, x: 0 }}
          transition={{ duration: 1 }}
          src={section2Image}
          className={'3xl:h-[42rem] h-[21.75rem] w-full lg:h-[35rem] lg:w-auto'}
          alt='科创成果、价值转化'
        />
        <ul className={'mt-10 space-y-10 lg:mt-0 lg:w-[50%]'}>
          {section2List.map((item) => {
            return (
              <motion.li
                initial={{ opacity: 0, x: -80 }}
                whileInView={{ opacity: 1, x: 0 }}
                transition={{ duration: 1 }}
                key={item.topTitle}
              >
                <p className={'3xl:text-base text-xs text-[rgba(0,0,0,0.35)]'}>
                  <img
                    src={titleIcon}
                    className={'mr-1 inline w-1.5 lg:w-2'}
                    alt='icon'
                  />
                  {item.topTitle}
                </p>
                <h2
                  className={
                    'text-primary leading-line-1 layout-h2 mt-1 mb-2 font-bold'
                  }
                >
                  {item.title}
                </h2>
                <p className={'leading-line-1 text-text-85 text-sm lg:text-sm'}>
                  {item.message1}
                </p>
                <p
                  className={
                    'leading-line-1 text-text-85 mt-6 text-sm lg:text-sm'
                  }
                >
                  {item.message2}
                </p>
              </motion.li>
            )
          })}
        </ul>
      </div>
    </div>
  )
}
